<template>
  <div>
    <div class="home_header">
      <div class="header_wrap">
        <a href="#" class="logo">
          <img src="https://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/indexLogo-a90bdaae6b.png" alt=""></a>
        <div class="search" @click="$router.replace('/search')">
          <span class="searchContent">
            搜索商品
          </span>
        </div>
        <div class="login" @click="$router.push('/profile')">登录</div>
      </div>
      <CategoryScroller/>
      <div class="altCateScro" v-show="isAllChannelShow">全部频道</div>
      <div @click="toggleAllChannel"
           class="toggle"
      >
        <img :class="isToggleRotate?'on':'off'" src="https://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/arrow-down-3-799ded53ea.png" alt="">
      </div>
      <AllChannels :isAllChannelShow="isAllChannelShow"/>
    </div>
  </div>
</template>

<script>
  import CategoryScroller from 'components/CategoriesScroller'
  import AllChannels from '../AllChannels'
  import PubSub from 'pubsub-js'
  export default {
    name: 'index',
    data () {
      return {
        isToggleRotate: false,
        isAllChannelShow: false,
        isMaskShow: false
      }
    },
    methods: {
      toggleAllChannel () {
        this.isToggleRotate = !this.isToggleRotate
        this.isAllChannelShow = !this.isAllChannelShow
        this.isMaskShow = !this.isMaskShow
        PubSub.publish('maskShow',this.isMaskShow)
      },
    },
    /*computed:{
      maskShow:{
        get(){
          return this.isMaskShow
        },
        set(val){
        
        }
      }
    },*/
    mounted () {
      this.$store.dispatch('getMenuCategory')
    },
    components:{
      CategoryScroller,
      AllChannels
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .home_header
    background #fff
    position fixed
    top 0
    z-index 50
    .header_wrap
      display flex
      height 60px
      padding 16px 30px
      .search
        width 442px
        height 56px
        line-height 56px
        border-radius 10px
        background: no-repeat url("https://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/search2-553dba3aff.png") #eee
        background-size 28px 28px
        background-position 40px 14px

        .searchContent
          margin-left 20%
          color #666
          font-size 28px

      .logo
        width 138px
        height 40px
        margin 8px 20px 0 0

        img
          width 100%

      .login
        width 74px
        height 40px
        margin 6px 0 0 16px
        text-align center
        line-height 40px
        border 1px solid #b4282d
        border-radius 8px
        color #b4282d
        background: #fff
    
    .altCateScro
      position absolute
      top 88px
      left 0
      width 750px
      height 70px
      line-height 60px
      padding-left 30px
      font-size 28px
      background #fff
      z-index 50
    .toggle
      width 100px
      height 65px
      z-index 100
      background: #fff
      text-align center
      line-height 60px
      position absolute
      right 0
      margin-top -60px

      .on
        transform rotate(180deg)
        transition linear 0.3s
      .off
        transform rotate(0deg)
        transition linear 0.3s
        
      img
        width 30px
        height 30px
</style>

